import React, { Component } from 'react'
// 引入 react-redux 连接器
import { connect } from 'react-redux'
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 创建 UI 组件
class Count extends Component {
  state = {
    carName: '奔驰'
  }

  // 相加
  increment = () => {
    const { value } = this.selectNum
    this.props.jia(+value)
  }

  // 相减
  decrement = () => {
    const { value } = this.selectNum
    this.props.jian(+value)
  }

  // 和是奇数再加
  incrementIfodd = () => {
    if (this.props.count % 2) {
      const { value } = this.selectNum
      this.props.jia(+value)
    }
  }

  // 异步加
  incrementAsyc = () => {
    setTimeout(() => {
      const { value } = this.selectNum
      this.props.jiaAsync(+value)
    }, 500)
  }

  render() {
    console.log('props-->', this.props)
    const { count } = this.props
    return (
      <div>
        当前 count 值为 {count}
        <div>
          <select ref={(c) => (this.selectNum = c)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
          <button onClick={this.increment}>increment</button>
          <button onClick={this.decrement}>decrement</button>
          <button onClick={this.incrementIfodd}>incrementIfodd</button>
          <button onClick={this.incrementAsyc}>incrementAsyc</button>
        </div>
      </div>
    )
  }
}

export default connect((state) => ({ count: state }), {
  jia: createIncrementAction,
  jian: createDecrementAction,
  jiaAsync: createIncrementAsyncAction
})(Count)
